<template>
	<view class="container">
		<uv-navbar title="视频文案" bg-color="none" @leftClick="leftClick"></uv-navbar>
		<view class="coupon-box">
			<uv-form labelPosition="left" :model="form" :rules="rules" ref="form" labelWidth="0">
				<view class="form-box">
					<template v-for="item in formList">
						<view :key="item.id">
							<view class="name">
								<text class="dy-iconfont" :class="item.icon"></text> {{item.title}}
							</view>
							<uv-form-item :prop="item.id">
								<view class="content" v-if="item.type == 'input'">
									<uv-input v-model="form[item.id]" :placeholder="item.placeholder"
										border="none"></uv-input>
								</view>
								<uv-textarea v-else-if="item.type == 'textarea'" v-model="form[item.id]"
									placeholder="请输入" border="none" :maxlength="item.length"></uv-textarea>
							</uv-form-item>
						</view>
					</template>
					<view class="">
						<view class="name">
							<text class="dy-iconfont"></text>上传视频
						</view>
						<view class="upload" v-if="!videoImage" @tap.stop.prevent="upVideo">
							<view class="upload-box">
								<image class="upload-image" src="/static/images/index/tu1.png" mode=""></image>
								<view class="upload-text">上传视频</view>
							</view>
						</view>
						<view class="video-li" v-else>
							<image class="image" :src="videoImage" mode="aspectFill"></image>
							<view class="remove" @tap.stop.prevent="remove">
								<uv-icon name="trash" color="#FFFFFF" size="14"></uv-icon>
							</view>
						</view>
					</view>
					<view class="" style="margin-top: 20rpx;">
						<view class="name">
							<text class="dy-iconfont"></text>上传视频封面
						</view>
						<view class="upload" v-if="!image" @tap.stop.prevent="upImage">
							<view class="upload-box">
								<image class="upload-image" src="/static/images/index/tu1.png" mode=""></image>
								<view class="upload-text">上传图片</view>
							</view>
						</view>
						<view class="video-li" v-else>
							<image class="image" :src="image" mode="aspectFill"></image>
							<view class="remove" @tap.stop.prevent="removeImage">
								<uv-icon name="trash" color="#FFFFFF" size="14"></uv-icon>
							</view>
						</view>
					</view>
				</view>
			</uv-form>
		</view>
		<view class="button-fb-box">
			<view class="button-fb" @click="onSubmit">保存提交</view>
		</view>
	</view>
</template>

<script>
	import {
		number
	} from '../../uni_modules/uv-ui-tools/libs/function/test';
	import siteinfo from "siteinfo.js";
	import {
		addVideoInfo,
	} from '@/common/api.js'
	const app = getApp();
	export default {
		data() {
			return {
				video: '',
				image: '',
				videoImage: '',
				formList: [{
					title: '视频主题*',
					icon: "",
					id: "Theme",
					type: 'textarea',
					length: 200

				}, {
					title: '补充要求*',
					icon: "",
					id: "supplement",
					type: 'textarea',
					length: 500
				}],
				form: {
					Theme: '',
					supplement: '',
				},
				rules: {
					Theme: {
						type: 'string',
						required: true,
						message: '视频主题必填，长度限200个字符',
						trigger: ['blur', 'change']
					},
					supplement: {
						type: 'string',
						required: true,
						message: '补充要求必填，长度限500个字符',
						trigger: ['blur', 'change']
					},
				},
			};
		},
		methods: {
			leftClick() {
				app.navigateBack()
			},
			upVideo() {
				uni.chooseMedia({
					count: 1,
					sourceType: ['album', 'camera'],
					mediaType: ['video'],
					success: (resolve) => {
						console.log(resolve);
						uni.showLoading({
							title: '上传中...'
						});
						let tempFilePaths = resolve.tempFiles[0].tempFilePath;
						const baseURL = siteinfo.siteroot;
						const uploadTask = uni.uploadFile({
							url: baseURL + '/system/oss/upload', //上传接口地址
							filePath: tempFilePaths,
							name: 'file',
							success: (uploadFileRes) => {
								this.videoImage = resolve.tempFiles[0].thumbTempFilePath
								this.video = JSON.parse(uploadFileRes.data).data.url
								console.log(this.videoImage,this.video);
								uni.hideLoading();
							},
						});
					}
				})
			},
			upImage() {
				uni.chooseMedia({
					count: 1,
					sourceType: ['album', 'camera'],
					mediaType: ['image'],
					success: (resolve) => {
						console.log(resolve);
						uni.showLoading({
							title: '上传中...'
						});
						let tempFilePaths = resolve.tempFiles[0].tempFilePath;
						const baseURL = siteinfo.siteroot;
						const uploadTask = uni.uploadFile({
							url: baseURL + '/system/oss/upload', //上传接口地址
							filePath: tempFilePaths,
							name: 'file',
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data)
								this.image = data.data.url
								console.log(data,this.image);
								uni.hideLoading();
							},
						});
					}
				})
			},
			remove() {
				this.video = ''
				this.videoImage = ''
			},
			removeImage() {
				this.image = ''
			},

			onSubmit() {
				this.$refs.form.validate().then(res => {
					if (!this.video) {
						uni.showModal({
							title: '提示',
							content: '请上传视频',
							showCancel: false
						})
						return false
					}
					uni.showLoading({
						title: '上传中...'
					});

					addVideoInfo({
						videoUrl: this.video,
						videoCoverPhoto: this.image || this.videoImage,
						videoTitle: this.form.Theme,
						videoContent: this.form.supplement
					}).then(res => {
						app.navigationTo('pages/material/material')
						uni.hideLoading();
					}).catch(err => {
						uni.hideLoading();
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		width: 100vw;
		padding: 40rpx;
		padding-top: 226rpx;
		padding-bottom: calc(96rpx + 32rpx + 40rpx);
		box-sizing: border-box;
		background: #F7F8FA;
		background: radial-gradient(128% 128% at 95% 0%, #D7CEFF 0%, #BBE1FF 62%, #FFFFFF 95%);


		.button-fb-box {
			position: fixed;
			bottom: 32rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;

			.button-fb {
				width: 480rpx;
				height: 96rpx;
				background: linear-gradient(180deg, #886AE6 0%, #4635FF 99%);
				border-radius: 48rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 96rpx;
				text-align: center;
			}

			.button-fb-s {
				width: 326rpx;
				height: 96rpx;
				border: 2rpx solid #4635FF;
				border-radius: 48rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #4635FF;
				line-height: 96rpx;
				text-align: center;
				margin-right: 20rpx;
			}
		}

		.tab {
			.tab-list {
				height: 120rpx;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				border: 2rpx solid #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx;
				box-sizing: border-box;

				.tab-item {
					width: 306rpx;
					height: 80rpx;
					line-height: 80rpx;
					border-radius: 16rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: #000000;
					text-align: center;

					&.active {
						background: linear-gradient(180deg, #886AE6 0%, #4635FF 99%);
						color: #FFFFFF;
					}
				}
			}
		}

		.form-box {
			background: rgba(255, 255, 255, 0.3);
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			border: 2rpx solid #FFFFFF;
			padding: 44rpx 42rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.name {
				.dy-iconfont {
					font-size: 40rpx;
					padding-right: 22rpx;
				}
			}

			.form-name-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}


			.content {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
				width: 100%;
				height: 80rpx;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 16rpx;
				padding: 18rpx 20rpx;
				box-sizing: border-box;
				font-weight: 400;
				font-size: 30rpx;
				color: #000000;

				.dy-iconfont {
					font-size: 46rpx
				}

				input {
					flex: 1;
				}
			}

			.number-box {
				display: inline-block;
			}

			.other-box {
				width: 240rpx;
				height: 60rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #000000;
				line-height: 60rpx;
				text-align: center;
			}
		}
	}
	.name{
		font-weight: 500;
		font-size: 32rpx;
		color: #000000;
		line-height: 48rpx;
	}

	.upload {
		width: calc(100% / 3 - 10rpx - 4rpx);
		padding-top: calc(100% / 3 - 10rpx - 4rpx);
		height: 0;
		position: relative;
		background: radial-gradient(128% 128% at 122% -42%, rgba(215, 206, 255, 0.3) 0%, rgba(187, 225, 255, 0.3) 63%, rgba(241, 245, 248, 0.4) 96%);
		border: 2rpx solid #FFFFFF;
		border-radius: 32rpx;
		flex-shrink: 0;
		margin-top: 40rpx;

		.upload-box {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			border-radius: 32rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.upload-image {
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 20rpx;
		}

		.upload-text {
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			line-height: 44rpx;
			text-align: center;
		}
	}

	.video-li {
		width: 200rpx;
		height: 200rpx;
		border-radius: 32rpx;
		margin-top: 40rpx;
		position: relative;

		.remove {
			position: absolute;
			top: 16rpx;
			right: 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 44rpx;
			height: 43rpx;
			background: rgba(216, 216, 216, 0.4);
			border-radius: 50%;
		}

		.image {
			width: 100%;
			height: 100%;
			border-radius: 32rpx;
		}
	}

	/deep/.uv-form-item__body__right__content {
		position: relative;

		.item__body__right__content__icon {
			position: absolute;
			right: 20rpx;
			top: 50%;
			transform: translateX(-50%);
		}
	}

	/deep/.uv-textarea {
		background: rgba(255, 255, 255, 0.3) !important;
		background-color: rgba(255, 255, 255, 0.3) !important;
	}
</style>